<!DOCTYPE html>
<html>

<head>
    <title>Bootstrap 提示框</title>
    <meta charset="utf-8">
    <!-- 适应移动设备 -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="../css/bootstrap.css">
    <script src="../jquery-3.5.1.min.js"></script>
    <script src="../js/bootstrap.js"></script>
</head>

<body>
    <br>
    <div class="container" style="border: 1px solid red;">
        <div class="container" style="padding: 100px 50px 10px;">
            <button type="button" class="btn btn-default" title="Popover title" data-container="body"
                data-toggle="popover" data-placement="left" data-content="左侧的 Popover 中的一些内容">
                左侧的 Popover
            </button>
            <button type="button" class="btn btn-primary" title="Popover title" data-container="body"
                data-toggle="popover" data-placement="top" data-content="顶部的 Popover 中的一些内容">
                顶部的 Popover
            </button>
            <button type="button" class="btn btn-success" title="Popover title" data-container="body"
                data-toggle="popover" data-placement="bottom" data-content="底部的 Popover 中的一些内容">
                底部的 Popover
            </button>
            <button type="button" class="btn btn-warning" title="Popover title" data-container="body"
                data-toggle="popover" data-placement="right" data-content="右侧的 Popover 中的一些内容">
                右侧的 Popover
            </button>
        </div>

        <script>
            $(function () {
                $("[data-toggle='popover']").popover();
            });
        </script>
    </div>
</body>

</html>